<template>
	<picker class="my-picker flex c333 fs22 align-center" :range="list" range-key="text" @change="change"
		@cancel="cancel">
		<text>{{valueText ? valueText : placeholder}}</text>
		<image src="../static/right_icon.png" mode=""></image>
	</picker>
</template>

<script>
	export default {
		name: "my-picker",
		props: {
			placeholder: {
				type: String,
				default: '请选择'
			},
			list: {
				type: Array,
				default: () => {
					return [{
							text: '其他',
							value: '1'
						},
						{
							text: '电影',
							value: '2'
						},
					]
				}
			}
		},
		data() {
			return {
				value: '',
				valueText: ''

			};
		},
		created() {

		},
		methods: {
			change(e) {
				this.value = this.list[e.detail.value].value
				this.valueText = this.list[e.detail.value].text
				this.$emit('ok', this.value,this.list[e.detail.value])
			},
			cancel() {
				this.isShow = false
			}
		},
	}
</script>

<style lang="less">
	.my-picker {
		box-sizing: border-box;
		width: 100%;
		height: 62upx;
		position: relative;
		padding: 0 28upx;
		justify-content: flex-end;

		text {
			padding-right: 28upx;
			font-size: 28upx;
			color: #999999;
		}

		image {
			width: 12rpx;
			height: 22rpx;
			position: absolute;
			right: 28rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
</style>